<template>
  <div class="caregory">
    <div
      v-for="item in categoryList"
      :key="item.id"
    >
      <h4>{{ item.name }}</h4>
      <ul>
        <li
          v-for="list in item.goodsList"
          :key="list.id"
          @click="toProductDetail(list.id)"
        >
          <img
            :src="list.list_pic_url"
            style="display:block;"
            width="100%"
            alt=""
          />
          <div class="van-ellipsis">{{ list.name }}</div>
          <div class="price">{{list.retail_price | RMBformat}}</div>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
export default {
  props: ["categoryList", "goodsList"],
  methods: {
    toProductDetail(id) {
      this.$router.push("/productDetail?id=" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.caregory {
  background: #fff;
  padding-top: 18px;
  padding-bottom: 2.8rem;
  h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }

  ul {
    padding: 0.1rem 2%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      margin-bottom: 0.1rem;
      background: #fff;
      text-align: center;
      line-height: 1.2rem;
      .price {
        color: darkred;
      }
    }
  }
}
</style>